<!DOCTYPE html>
<html lang="ch-CN">
	<head>
		<title>爱尚音乐</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="keywords" content="音乐,爱尚音乐,在线听歌,音乐下载,音乐播放器,音乐网站,MV,巅峰榜,音乐排行榜,翻译歌曲,热门歌曲,经典老歌">
		<meta name="description" content="爱尚音乐是一款免费音乐服务，海量音乐在线试听、最流行音乐在线首发、歌词翻译、手机铃声下载、高品质音乐试听、正版音乐下载、免费空间背景音乐设置、MV观看等，是互联网音乐播放和下载的首选">
		<!-- 引入页面的主体样式 -->
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<!-- 引入jQuery的核心文件 -->
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入页面主体js文件 -->
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 横幅模块开始 -->
		<div class="banner">
			<ul>
				<!-- datasrc设置临时的属性在之后进行相对应的媒介元素替换 -->
				<li data-src="mp3/1.mp3" title="春江花月夜 - 文靖渊">
					<img src="img/1.jpg">
				</li>
				<li data-src="mp3/2.mp3" title="阿衣莫 - 阿吉太组合">
					<img src="img/2.jpg">
				</li>
				<li data-src="mp3/3.mp3" title="意外 - 薛之谦">
					<img src="img/3.jpg">
				</li>
				<li data-src="mp3/4.mp3" title="光年之外 - 邓紫棋">
					<img src="img/4.jpg">
				</li>
				<li data-src="mp3/5.mp3" title="年少有为 - 李荣浩">
					<img src="img/5.jpg">
				</li>
			</ul>
		</div>
		<!-- 横幅模块结束 -->

		<!-- 播放器模块开始 -->
		<div class="music">
			<div class="m-img">
				<img src="img/1.jpg">
			</div>
			<div class="m-text">春江花月夜 - 文靖渊</div>
			<div class="m-btn">
				<a class="m-prev iconfont" href="#" title="上一首">&#xe603;</a>
				<a class="m-play iconfont" href="#" title="播放">&#xe87c;</a>
				<a class="m-next iconfont" href="#" title="下一首">&#xe602;</a>
			</div>
			<span class="m-open iconfont">&#xe660;</span>
			<audio src="mp3/1.mp3" class="m-mp3"></audio>
		</div>
		<!-- 播放器模块结束 -->
	</body>
</html>
